<template>
  <!-- 在这里添加公共头部 -->
  <div class="header">
      <div class="board">
          <img src="@/assets/common/img/sudoku.png" @click="go" alt="主菜单">
        <h4>{{serviceName}}</h4>
      </div>
      <div class="menu">
        <el-menu mode="horizontal"
                class="el-menu-demo"
                :router="true"
                :default-active="defaultMeua">
          <div v-for="(list, index) in menuList" class="gc-menu-list" :key="index">
            <el-menu-item :index="list.value" v-if="!list.hasChildDomain && !list.hasChildUrl">{{list.internationalText}}</el-menu-item>
            <!--二级菜单-->
            <el-submenu :index="list.index" v-if="list.hasChildDomain || list.hasChildUrl">
              <template slot="title">{{list.internationalText}}</template>
              <el-menu-item v-for="(ls, key) in list.childList" :index="ls.value" :key="key">{{ls.internationalText}}</el-menu-item>
            </el-submenu>
          </div>
        </el-menu>
      </div>
      <ul class="iconList">
        <li>
          <!-- <router-link to="/"> -->
            <i class="fa fa-at fa-lg"></i>
          <!-- </router-link> -->
        </li>
        <li>
          <!-- <router-link to="/"> -->
            <i class="fa fa-comments fa-lg"></i>
          <!-- </router-link> -->
        </li>
        <li>
          <!-- <router-link to="/"> -->
           <i class="fa fa-wrench fa-lg"></i>
          <!-- </router-link> -->
        </li>
        <li>
          <i class="fa fa-user-circle fa-lg"></i>
          <div class="drop">
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                {{username}}<i class="el-icon-arrow-down el-icon-caret-bottom"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="logout">{{I18n.logout}}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </li>
      </ul>
  </div>
</template>

<script>
import INTERFACE from '@/interface'
import globalConfig from '@/config'
import Vue from 'vue'
export default {
  data() {
    return {
      serviceName: '',
      username: '',
      menuList: '',
      dashboard: window.host.dashboardUrl,
      routeName: sessionStorage.getItem('routeName'),
      I18n: window.I18n,
      defaultMeua: ''
    }
  },
  // 监听路由name的变化
  watch: {
    '$route'(v) {
      this.defaultMeua = v.meta.menu
    }
  },
  created() {
    INTERFACE.getHeaderList().then(data => {
      data.data.grantedSubmenu.forEach((l, index) => {
        l.index = String(l.value)
        // 有子级菜单的情况下获取子级菜单
        if (l.hasChildDomain || l.hasChildUrl) {
          l.index = String(index)
          INTERFACE.getChildmenu(l.resourceId).then(data => {
            if (data.data && data.data.grantedSubmenu) {
              data.data.grantedSubmenu.forEach(item => {
                item.index = String(item.value)
              })
              Vue.set(l, 'childList', data.data.grantedSubmenu)
            } else {
              Vue.set(l, 'childList', [{internationalText: ''}, {internationalText: ''}])
            }
          })
        }
      })
      this.menuList = data.data.grantedSubmenu
      this.serviceName = data.data.serviceName
    })
    this.username = globalConfig.getCookie('username')
  },
  methods: {
    go() {
      // 进来默认仪表板
      window.location.href = this.dashboard
    },
    handleCommand(command) {
      if (command === 'logout') {
        INTERFACE.logout().then(data => {
          // 清空cookie 跳转到登录页
          globalConfig.clearCookie()
          window.location.href = window.host.loginUrl
        });
      }
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
.header
  display flex
  justify-content space-between
  height 47px
  background-color #68a9fe
  color #fff
  padding 0 20px

  .board
    display flex
    align-items center
    justify-content center

    img 
      cursor pointer
    h4
      font-size 20px
      font-weight 400
      margin-left 20px
  
  .menu
    flex 1
    padding 0 10px

    .el-menu
      background-color #68a9fe
      display flex

    .gc-menu-list
      height 47px
      .el-menu-item, .el-submenu
        height 47px
        line-height 47px
        color #fff
        background-color #68a9fe
        padding 0 12px

       .el-menu-item.is-active
         background-color #528ae5

      .el-submenu__title
        height 47px
        line-height 47px
        color #fff
        background-color #68a9fe !important
        border none

        i
          display none
      .el-submenu.is-active .el-submenu__title
         background-color #528ae5 !important

  .iconList
    display flex

    li
      margin-right 20px
      display flex
      align-items center

      .drop
        margin-left 20px

        .el-dropdown
          color #fff
          font-size 14px

          .el-icon-arrow-down
            margin-left 5px

      &:last-child
        margin-right 0

.el-menu--horizontal 
  border none !important
  .el-menu
    display flex
    flex-direction column
    width 200px
    box-shadow 0px 4px 10px rgba(153, 153, 153, 0.349)
    border solid 1px #DEE2E6

  .el-menu-item
    height 36px
    line-height 36px
    color #878d99

    &:hover
      background-color #E9ECEF
  .el-menu-item.is-active
    color #6ba8fb
</style>
